<template>
  <div class="box" @click="add"></div>
  <Row>
    <Button type="default">操作</Button>
  </Row>
  <Row>
    <Input-number :max="10" :min="1" v-model="model" :parser="onParser" :formatter="onFormat"></Input-number>
  </Row>
  <Row>
    <Col span="12">
      <Select v-model="radio" @on-change="onChangeRadio">
        <Option :value="1">栏目1</Option>
        <Option :value="2">栏目2</Option>
      </Select>
    </Col>
  </Row>
  <div class="testFlex">
    <div class="tf-item">1</div>
    <div class="tf-item">2</div>
    <div class="tf-item">3</div>
    <div class="tf-item">4</div>
    <div class="tf-item">5</div>
  </div>
</template>
<script>
import { uniq, difference } from 'lodash'
export default {
  data() {
    return {
      model: '1',
      radio: 2,
      list: []
    }
  },
  methods: {
    onChangeRadio(e) {
      console.log(e)
    },
    add() {
      console.log(`helloworld`)
    },
    onParser(value) {
      console.log(`onParser`)
      return value.replace('元', '')
    },
    onFormat(value) {
      console.log(`onFormat`)
      return value + '元'
    }
  },
  mounted() {
    let arr = [1, 2, 2, 4, 5, 6]
    let oneArr = arr.reduce(function (arr, memo) {
      if (arr.includes(memo)) {
      } else {
        arr.push(memo)
      }
      return arr
    }, [])

    // console.log('oneArr', oneArr)
    // let newArr = uniq(arr)
    // console.log(`newArr`, newArr)

    let arr1 = [1, 2, 3, 4, 5]
    let arr2 = [4, 5, 6, 7, 8]

    let differentArr = difference(arr2, arr1)
    console.log(differentArr)
    function abc(a, b) {}
  }
}
</script>
<style lang="scss" scoped>
.testFlex {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(20px, 1fr)); //尽可能多的网格而不是内容
  // grid-template-columns: repeat(auto-fit, minmax(20px, 1fr)); //其实是网格的适应
  .tf {
    &-item {
      border: 1px solid #000;
      text-align: center;
    }
  }
}
.box {
  width: 100px;
  height: 100px;
  border: 1px solid #000;
}
</style>
